<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/panel/rank2' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
      <el-breadcrumb-item >{{$t('目录.热销商品')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="rank2-card">
      <div>
        <div class="rank2-card-title">{{$t('商品查询')}}</div>
        <el-divider></el-divider>
        <div >
          <el-form :model="formData" label-width="10.58rem"  :inline="true" class="responsive-form">
            <el-row :gutter="10">
              <el-col :span="16">
                <el-form-item :label="$t('关键词')">
                  <div style="display: flex;width: 100%;">
                    <el-input v-model="formData.goods_name" :placeholder="$t('请输入关键词')" style="width: 100%;" />
                    <!--                                    <el-select v-model="formData.matchMode" style="width: 40%;">-->
                    <!--                                        <el-option :label="$t('严格匹配')" :value="1" />-->
                    <!--                                        <el-option :label="$t('模糊匹配')" :value="2" />-->
                    <!--                                    </el-select>-->
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('站点')">
                  <el-select v-model="formData.regionId" :placeholder="$t('请选择站点')" class="form-select">
                    <el-option v-for="item in siteList" :key="item.regionId" :label="item.name" :value="item.regionId" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item :label="$t('品类')">
                  <el-cascader v-model="selectedValue" @change="handleChangeCate" @remove-tag="handleClearSelect"
                               :props="props" :placeholder="$t('请选择品类')" collapse-tags collapse-tags-tooltip :max-collapse-tags="5" filterable style="width: 100%;" />
                </el-form-item>
              </el-col>
              <!--                        <el-col :span="8">-->
              <!--                            <el-form-item :label="$t('总销量')">-->
              <!--                                <div style="display: flex;width: 100%;">-->
              <!--                                    <el-input type="number" v-model="formData.sale_count_min" :placeholder="$t('最低')" class="form-input" />-->
              <!--                                    <el-input type="number" v-model="formData.sale_count_max" :placeholder="$t('最高')" class="form-input" />-->
              <!--                                </div>-->
              <!--                            </el-form-item>-->
              <!--                        </el-col>-->
              <el-col :span="8">
                <el-form-item :label="$t('日销量')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.sale_count_min" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.sale_count_max" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('周销量')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.weekSoldMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.weekSoldMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item :label="$t('月销量')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.monthSoldMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.monthSoldMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('日销增长率')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.daySoldRateMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.daySoldRateMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('日销售额')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.daySalesMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.daySalesMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="isOpening == false"></div>
        <div v-else>
          <el-form :model="formData" label-width="10.58rem" :inline="true" class="responsive-form">
            <el-row :gutter="20">
              <!--                            <el-col :span="8">-->
              <!--                                <el-form-item :label="$t('周销增长率')">-->
              <!--                                    <div style="display: flex;width: 100%;">-->
              <!--                                        <el-input type="number" v-model="formData.weekSoldRateMin" :placeholder="$t('最低')" class="form-input" />-->
              <!--                                        <el-input type="number" v-model="formData.weekSoldRateMax" :placeholder="$t('最高')" class="form-input" />-->
              <!--                                    </div>-->
              <!--                                </el-form-item>-->
              <!--                            </el-col>-->
              <!--                            <el-col :span="8">-->
              <!--                              <el-form-item :label="$t('月销增长率')">-->
              <!--                                  <div style="display: flex;width: 100%;">-->
              <!--                                      <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最低')" class="form-input" />-->
              <!--                                      <el-input type="number" v-model="formData.monthSoldRateMin" :placeholder="$t('最高')" class="form-input" />-->
              <!--                                  </div>-->
              <!--                              </el-form-item>-->
              <!--                            </el-col>-->
              <!--                            <el-col :span="8">-->
              <!--                              <el-form-item :label="$t('总销售额')">-->
              <!--                                  <div style="display: flex;width: 100%;">-->
              <!--                                      <el-input type="number" v-model="formData.salesMin" :placeholder="$t('最低')" class="form-input" />-->
              <!--                                      <el-input type="number" v-model="formData.salesMax" :placeholder="$t('最高')" class="form-input" />-->
              <!--                                  </div>-->
              <!--                              </el-form-item>-->
              <!--                            </el-col>-->
              <!--                            <el-col :span="8">-->
              <el-col :span="8">
                <el-form-item :label="$t('周销售额')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.weekSalesMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.weekSalesMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('月销售额')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.monthSalesMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.monthSalesMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('评论数')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.reviewNumMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.reviewNumMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-col :span="8">
                <el-form-item :label="$t('上架时间')">
                  <div style="display: flex;width: 100%;">
                    <el-date-picker v-model="onSaleTimeRange1" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"
                                    start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange" @visible-change="handleVisibleChange" @focus="handleFocus"/>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('库存')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.quantityMin" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.quantityMax" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="$t('价格')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.sale_price" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.retail_price" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-col :span="8">
                <el-form-item :label="$t('Temu.评分')">
                  <div style="display: flex;width: 100%;">
                    <el-input type="number" v-model="formData.score_min" :placeholder="$t('最低')" class="form-input" />
                    <el-input type="number" v-model="formData.score_max" :placeholder="$t('最高')" class="form-input" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <!--                        <el-row :gutter="20">-->
            <!--                            <el-col :span="8">-->
            <!--                              <el-form-item :label="$t('开店时间')">-->
            <!--                                  <div style="display: flex;width: 100%;">-->
            <!--                                      <el-date-picker v-model="onSaleTimeRange2" type="daterange" unlink-panels style="width: 100%;" :disabled-date="disabledDate"-->
            <!--                                      start-placeholder="Start Date" end-placeholder="End Date" @change="handleDateRangeChange2" @visible-change="handleVisibleChange" @focus="handleFocus"/>-->
            <!--                                  </div>-->
            <!--                              </el-form-item>-->
            <!--                            </el-col>-->
            <!--                        </el-row>-->
            <!--                        <el-row :gutter="20">-->
            <!--                            <el-col :span="8">-->
            <!--                                <el-form-item :label="$t('商品状态')">-->
            <!--                                    <el-select v-model="formData.status" :placeholder="$t('请选择站点')" class="form-select">-->
            <!--                                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"/>-->
            <!--                                    </el-select>-->
            <!--                                </el-form-item>-->
            <!--                            </el-col>-->
            <!--                            <el-col :span="8"></el-col>-->
            <!--                            <el-col :span="8"></el-col>-->
            <!--                        </el-row>-->
          </el-form>
        </div>
        <div v-if="isOpening == false" style="display: flex;width: 100%;justify-content: space-between;">
          <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
            <el-icon><ArrowDown /></el-icon>
            <div style="margin: -0.3rem 0 0 0.5rem;">{{ $t('展开') }}</div>
          </el-button>
          <div style="display: flex;">
            <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="btnSearchProducts">
              <el-icon><Search /></el-icon>
              <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
            </el-button>
            <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
              <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
            </el-button>
          </div>
        </div>
        <div v-else style="display: flex;width: 100%;justify-content: space-between;">
          <el-button style="margin: 1rem 1rem 0 3%;color:rgb(0,82,217);display: flex;border: none;" @click="isOpen()">
            <el-icon><ArrowUp /></el-icon>
            <div style="margin: -0.1rem 0 0 0.5rem;">{{ $t('收起') }}</div>
          </el-button>
          <div style="display: flex;">
            <el-button style="margin: 1rem 0 0 0;background-color:rgb(0,82,217);color: #fff;display: flex;
                        height: 2.5rem;width: 6.25rem;" @click="btnSearchProducts">
              <el-icon><Search /></el-icon>
              <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('Temu.搜索') }}</div>
            </el-button>
            <el-button style="margin: 1rem 0 0 2rem;background-color:#E8E9ED;color: #101010;height: 2.5rem;
                        width: 6.25rem;" @click="clearForm">
              <div style="margin: -0.1rem 0 0 0.2rem;font-size:0.9rem">{{ $t('清除') }}</div>
            </el-button>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
      <div>
        <div class="rank2-card-title">
          {{$t('搜索结果')}}
          <span style="color:#999;font-size: 0.8rem">({{ total }}{{ $t('共') }})</span>
        </div>
        <!--未登录-->
        <div v-if="!isLogin">
          <div style="margin-top: 1.3rem;position: relative">
            <!-- table height="1240"  -->
            <el-table :data="sortedProductList" style="width: 100%" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                      :cell-style="{'text-align':'center'}" :row-style="{height:'70px'}" v-loading="!isSuccess" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
                      :default-sort="{ prop: sort, order:order }" height="800"  element-loading-text="Loading..." ref="table">
              <el-table-column prop="products" :label="this.$t('表格.商品')" width="380" fixed>
                <template #default="scope">
                  <div style="display: flex;">
                    <div style="cursor: pointer;">
                      <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;"/>
                    </div>
                    <div class="goodsName" @click="shiftDetailTemu(scope.row.goods_id,this.formData.regionId,scope.row.platform)">
                      <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                      <span class="showOverTooltip" style="font-size: 14px">{{ scope.row.goods_name }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                <template #default="scope">
                  <div style="color: #ff5c00;font-size: 14px">
                    <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == '' || scope.row.sale_price == '0.00'||scope.row.sale_price == '0' ">
                      <span>{{ scope.row.retail_price_symbol }}</span>
                    </div>
                    <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == '' || scope.row.retail_price == '0' ||scope.row.retail_price == '0.00'">
                      <span>{{ scope.row.sale_price_symbol }}</span>
                    </div>
                    <div v-else>
                      <div v-if="scope.row.sale_price < scope.row.retail_price">
                        <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                      </div>
                      <div v-else-if="scope.row.sale_price > scope.row.retail_price">
                        <span>{{ scope.row.retail_price_symbol }} - {{ scope.row.sale_price_symbol }}</span>
                      </div>
                      <div v-else-if="scope.row.retail_price == scope.row.sale_price && scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                        <span>{{ scope.row.sale_price_symbol }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="this.$t('表格.销量')">
                <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                      -
                    </div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.sale_count}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.week_sale_count}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.month_sale_count}}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="145">
                <template #default="scope">
                  <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                    <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                    <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                      <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                      <span style="margin-left: 0.3rem;color:#F53F3F">{{ scope.row.growth_rate }}%</span>
                    </div>
                    <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                    <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                      <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                      <span style="margin-left: 0.3rem;color:#58A55C">{{ scope.row.growth_rate }}%</span>
                    </div>
                    <!-- 无数据 -->
                    <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="this.$t('表格.销售额')">
                <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.revenue == null ">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.revenue}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.week_revenue == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.week_revenue}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.month_revenue == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.month_revenue}}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="shelf_time" :label="this.$t('表格.上架时间')" sortable="custom" width="120">
                <template #default="scope">
                  <div v-if="scope.row.shelf_time == '' || scope.row.shelf_time == null"> - </div>
                  <div v-else style="font-size: 14px">{{ scope.row.shelf_time.slice(0,10) }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                <template #default="scope">
                  <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ parseInt(scope.row.inventory)}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="star_comment" :label="this.$t('表格.商品评分')" sortable="custom">
                <template #default="scope">
                  <div v-if="scope.row.star_comment == '' || scope.row.star_comment == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ scope.row.star_comment}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="review_count" :label="this.$t('表格.评论数')" sortable="custom" width="130">
                <template #default="scope">
                  <div v-if="scope.row.review_count == '' || scope.row.review_count == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ parseInt(scope.row.review_count)}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- 未登录 只显示五条 遮罩层-->
            <div v-show="isSuccess && !isLogin"  class="mask-layer">
              <div class="can-not-show2" style="width: 100%">{{ $t('遮罩.去登录') }}</div>
              <div style="margin-top: 1rem;margin-bottom: 3rem;width: 100%;display: flex;justify-content: center;">
                <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;border: none !important;" @click="shiftRegister()">{{ $t('按钮.注册') }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <!--登录-->
        <div v-else>
          <div v-if="isVip" style="margin-top: 1.3rem;position: relative">
            <!-- table height="1240"  -->
            <el-table :data="sortedProductList" style="width: 100%" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px','text-align':'center'}"
                      :cell-style="{'text-align':'center'}" :row-style="{height:'70px'}" @sort-change="handleSortChange" :header-cell-class-name="getHeaderCellClassName"
                      :default-sort="{ prop: sort, order:order }" height="800" v-loading="!isSuccess" element-loading-text="Loading..." ref="table">
              <el-table-column prop="products" :label="this.$t('表格.商品')" width="380" fixed>
                <template #default="scope">
                  <div style="display: flex;">
                    <div style="cursor: pointer;">
                      <img :src="scope.row.goods_img" style="width: 5rem;height: 5rem;"/>
                    </div>
                    <div class="goodsName" @click="shiftDetailTemu(scope.row.goods_id,this.formData.regionId,scope.row.platform)">
                      <!-- <span class="product-tag" >{{scope.row.catItems[3].catName}}</span> -->
                      <span class="showOverTooltip" style="font-size: 14px">{{ scope.row.goods_name }}</span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="sale_price" :label="this.$t('价格')" sortable="custom" width="140">
                <template #default="scope">
                  <div style="color: #ff5c00;font-size: 14px">
                    <div v-if="scope.row.sale_price_symbol == null || scope.row.sale_price_symbol == '' || scope.row.sale_price == '0.00'||scope.row.sale_price == '0' ">
                      <span>{{ scope.row.retail_price_symbol }}</span>
                    </div>
                    <div v-else-if="scope.row.retail_price_symbol == null || scope.row.retail_price_symbol == '' || scope.row.retail_price == '0' ||scope.row.retail_price == '0.00'">
                      <span>{{ scope.row.sale_price_symbol }}</span>
                    </div>
                    <div v-else>
                      <div v-if="scope.row.sale_price < scope.row.retail_price">
                        <span>{{ scope.row.sale_price_symbol }} - {{ scope.row.retail_price_symbol }}</span>
                      </div>
                      <div v-else-if="scope.row.sale_price > scope.row.retail_price">
                        <span>{{ scope.row.retail_price_symbol }} - {{ scope.row.sale_price_symbol }}</span>
                      </div>
                      <div v-else-if="scope.row.retail_price == scope.row.sale_price && scope.row.retail_price_symbol == scope.row.sale_price_symbol">
                        <span>{{ scope.row.sale_price_symbol }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="this.$t('表格.销量')">
                <el-table-column prop="sale_count" :label="this.$t('表格.日')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.sale_count == null">
                      -
                    </div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.sale_count}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="week_sale_count" :label="this.$t('表格.周')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.week_sale_count == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.week_sale_count}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="month_sale_count" :label="this.$t('表格.月')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.month_sale_count == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.month_sale_count}}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="growth_rate" :label="this.$t('增长率')" sortable="custom" width="145">
                <template #default="scope">
                  <div style="display: flex;justify-content: center; align-items: center;font-size: 14px;">
                    <!-- 上涨 scope.row.growth_rate[0] !=='-'&& scope.row.growth_rate !=='/'-->
                    <div v-if="scope.row.growth_rate>0 && scope.row.growth_rate !=='/'" style="height: 5rem;line-height: 5rem;">
                      <img style="margin-top: 0.6rem;" src="../assets/img/icon/arrowup1.svg"/>
                      <span style="margin-left: 0.3rem;color:#F53F3F">{{ scope.row.growth_rate }}%</span>
                    </div>
                    <!--下跌 v-else-if="scope.row.growth_rate[0] =='-'"-->
                    <div v-else-if="scope.row.growth_rate<0" style="height: 5rem;line-height: 5rem;">
                      <img style="margin-top: 0.6rem;transform:rotate(180deg);width: 0.94rem;height: 0.94rem;" src="../assets/img/icon/arrowdown.svg"/>
                      <span style="margin-left: 0.3rem;color:#58A55C">{{ scope.row.growth_rate }}%</span>
                    </div>
                    <!-- 无数据 -->
                    <div v-else style="height: 5rem;line-height: 5rem;"><span>{{ scope.row.growth_rate }}%</span></div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="this.$t('表格.销售额')">
                <el-table-column prop="revenue" :label="this.$t('表格.日')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.revenue == null ">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.revenue}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="week_revenue" :label="this.$t('表格.周')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.week_revenue == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.week_revenue}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="month_revenue" :label="this.$t('表格.月')" sortable="custom" width="120">
                  <template #default="scope">
                    <div style="font-size: 14px" v-if="scope.row.month_revenue == null">-</div>
                    <div v-else style="font-size: 14px">
                      {{scope.row.month_revenue}}
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="shelf_time" :label="this.$t('表格.上架时间')" sortable="custom" width="120">
                <template #default="scope">
                  <div v-if="scope.row.shelf_time == '' || scope.row.shelf_time == null"> - </div>
                  <div v-else style="font-size: 14px">{{ scope.row.shelf_time.slice(0,10) }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="inventory" :label="this.$t('表格.库存')" sortable="custom" width="110">
                <template #default="scope">
                  <div v-if="scope.row.inventory == '' || scope.row.inventory == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ parseInt(scope.row.inventory)}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="star_comment" :label="this.$t('表格.商品评分')" sortable="custom">
                <template #default="scope">
                  <div v-if="scope.row.star_comment == '' || scope.row.star_comment == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ scope.row.star_comment}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="review_count" :label="this.$t('表格.评论数')" sortable="custom" width="130">
                <template #default="scope">
                  <div v-if="scope.row.review_count == '' || scope.row.review_count == null"> - </div>
                  <div v-else style="font-size: 14px">
                    {{ parseInt(scope.row.review_count)}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--  登录且不是vip时显示 -->
        <div v-show="!isVip && isSuccess && isLogin"  style="margin:0 10%;">
          <div class="can-not-show" style="width: 100%">{{ $t('没开vip') }}</div>
          <div style="margin-top: 1rem;margin-bottom: 3rem;width: 100%;display: flex;justify-content: center;">
            <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
          </div>
        </div>
      </div>
      <div v-show="isSuccess && isVip && isLogin" class="pagination-container">
        <el-pagination v-model:current-page="formData.page" v-model:page-size="formData.size" :page-sizes="[10,20,50,100]"
                       :size="size" :disabled="disabled" :background="background" layout="sizes, prev, pager, next, jumper"
                       :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page/>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep'; // 引入 lodash 的 cloneDeep 方法
// import TableCell from '../components/TableCell.vue'; // 引入 getDetails getCates searchGoods
import {getSites,} from '../apis/gb'
import {getUser} from '../apis/user'
import {getMergeCates,getMergeProducts} from '../apis/merge'
// import {getCountries} from '../apis/rank'
import { ElMessage } from 'element-plus';
import {buttonClick} from "@/util/buttonClick";
// let mapIsLeaf = {};
export default{
  name: 'MyComponent',
  components: {
    // TableCell // 注册
  },
  data(){
    return{
      isSuccess:false,
      isVip:false,
      symbol:"$",
      // mapIsLeaf:{},
      parentCatId:0,
      cateList:[],
      selectedValues:[],  // 用于存储选中的值
      selectedValue: [], // 单选时使用单一值
      // eslint-disable-next-line no-unused-vars
      props:{
        multiple: false ,
        lazy:true,
        checkStrictly: true,
        async lazyLoad(node, resolve) {
          const {value = 0} = node;
          getMergeCates(value).then((res)=>{
            // this.catId = res.data[0].id
            if(Array.isArray(res.data)){
              this.cateList = res.data
              //ES新特征 深拷贝
              const formattedData = res.data.map(item => {
                const newItem = {
                  value: item.id,
                  label: item.name,
                  children: item.is_leaf ? [] : undefined, // 如果 isLeaf 为 false，则允许有子节点
                  leaf: item.is_leaf,
                };
                // mapIsLeaf['id_'+item.catId] = item.isLeaf;
                return newItem;
              });
              resolve(formattedData);
            }
          })
        }},
      siteList:[],
      statusList:[
        {
          value:0,
          label: this.$t('不限'),
        },
        {
          value:1,
          label: this.$t('正常'),
        },
        {
          value:2,
          label: this.$t('缺货'),
        },
        {
          value:3,
          label: this.$t('下架'),
        },
      ],
      onSaleTimeRange1: [],
      onSaleTimeRange2: [],
      // formData:{
      //     keyword:null,
      //     // 商品标题匹配模式
      //     // 1=严格匹配 2=模糊匹配，默认为2（模糊匹配）
      //     matchMode:2,
      //     // 匹配站点，默认为211（美国）  69法国
      //     regionId:null,
      //     siteId: 49,
      //     // 匹配品类ID，多个用逗号隔开
      //     catIds: null,
      //     soldMin: null,
      //     soldMax:null,
      //     daySoldMin:null,
      //     daySoldMax:null,
      //     weekSoldMin:null,
      //     weekSoldMax:null,
      //     monthSoldMin:null,
      //     monthSoldMax:null,
      //     daySoldRateMin:null,
      //     daySoldRateMax:null,
      //     weekSoldRatelin:null,
      //     weekSoldRateMax:null,
      //     monthSoldRateMin:null,
      //     monthSoldRateMax:null,
      //     salesMin:null,
      //     salesMax:null,
      //     daySalesMin:null,
      //     daySalesMax:null,
      //     weekSalesMin:null,
      //     weekSalesMax:null,
      //     monthSalesMin:null,
      //     monthSalesMax:null,
      //     quantityMin:null,
      //     quantityMax:null,
      //     mallSoldMin:null,
      //     mallSoldMax:null,
      //     priceMin:null,
      //     priceMax:null,
      //     goodsScoreMin:null,
      //     goodsScoreMax:null,
      //     reviewNumMin:null,
      //     reviewNumMax:null,
      //     onSaleTimeMin:null,
      //     onSaleTimeMax:null,
      //     malOpenTimeMin:null,
      //     mallOpenTimeMax:null,
      //     // 商品状态1=正常 2=缺货 3=下架 0不限
      //     status:1,
      //     sort: "review_count",
      //     order: "desc",
      //     showPreference: 2,
      //     page: 1,
      //     size: 10,
      //
      //     // 新接口参数
      //     regin_id:'',
      //     country:'fr', //fr
      //     cat_id:'',
      //     goods_name:null,
      //     sale_price:null,
      //     retail_price:null,
      //     sale_count_min:null,
      //     sale_count_max:null,
      //     score_min:null,
      //     score_max:null,
      //     shelf_time_min:null,
      //     shelf_time_max:null,
      //
      // },
      formData:{
        page:1,
        size:10,
        // 新接口参数
        regionId:null,
        // country:'fr', //fr
        cat_id:'',
        goods_name:null,
        sale_price:null,
        retail_price:null,
        sale_count_min:null,
        sale_count_max:null,
        score_min:null,
        score_max:null,
        shelf_time_min:null,
        shelf_time_max:null,
        sort:'growth_rate',//增长率
        order:'descending',

        weekSoldMin:null,
        weekSoldMax:null,
        monthSoldMin:null,
        monthSoldMax:null,
        daySoldRateMin:null,
        daySoldRateMax:null,
        daySalesMin:null,
        daySalesMax:null,
        weekSalesMin:null,
        weekSalesMax:null,
        monthSalesMin:null,
        monthSalesMax:null,
        reviewNumMin:null,
        reviewNumMax:null,
        onSaleTimeRange1:null,
        quantityMin:null,
        quantityMax:null,
      },
      catId:'',
      templateFormData:{
        page:1,
        size:10,
        // 新接口参数
        regionId:null,
        // country:'fr', //fr
        cat_id:'',
        goods_name:null,
        sale_price:null,
        retail_price:null,
        sale_count_min:null,
        sale_count_max:null,
        score_min:null,
        score_max:null,
        shelf_time_min:null,
        shelf_time_max:null,
        sort:'growth_rate',//增长率
        order:'descending',

        weekSoldMin:null,
        weekSoldMax:null,
        monthSoldMin:null,
        monthSoldMax:null,
        daySoldRateMin:null,
        daySoldRateMax:null,
        daySalesMin:null,
        daySalesMax:null,
        weekSalesMin:null,
        weekSalesMax:null,
        monthSalesMin:null,
        monthSalesMax:null,
        reviewNumMin:null,
        reviewNumMax:null,
        onSaleTimeRange1:null,
        quantityMin:null,
        quantityMax:null,
      },
      isOpening:false,
      total:null,
      currentPage:1,
      pageSize:10,
      size:'default',
      background:true,
      disabled:false,
      myChart:null,
      tableData:[],
      sortBy: '',
      sortOrders: {},
      reTry:3,
      history:[],
      sort:'sale_count',//增长率
      order:'descending',
      orderParams:'',
      // url接收的国家参数
      country:'',
      countryCodes:{
        '210':'uk',
        '212':'eur',//欧盟 ？  211全部
        '76':'de',//德国
        '69':'fr',
        '98':'it',//意大利
        '163':'pt',//葡萄牙
        '186':'es',//西班牙
        // 国家代码和对应站点id...
      },
      countryCodes1:{
        UK:210,
        EUR:'212',//欧盟 ？  211全部
        DE:'76',//德国
        FR:'69',
        IT:'98',//意大利
        PT:'163',//葡萄牙
        ES:'186',//西班牙
        // 国家代码和对应站点id...
      },
      userInfo:{
        "name": "",
        "invite_code": "",
        "email": "",
        "subscription": "",
        "expired_at": "",
        "is_active": false,
        "register_date":''
      },
      options:[
        {
          value: 'id',
          label: '1',
          children: [
            {
              value: 'disciplines',
              label: 'Disciplines',
              children: [
                {
                  value: 'consistency',
                  label: 'Consistency',
                },
                {
                  value: 'feedback',
                  label: 'Feedback',
                },
                {
                  value: 'efficiency',
                  label: 'Efficiency',
                },
                {
                  value: 'controllability',
                  label: 'Controllability',
                },
              ],
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'side nav',
                  label: 'Side Navigation',
                },
                {
                  value: 'top nav',
                  label: 'Top Navigation',
                },
              ],
            },
          ],
        },
        {
          value: 'component',
          label: 'Component',
          children: [
            {
              value: 'basic',
              label: 'Basic',
              children: [
                {
                  value: 'layout',
                  label: 'Layout',
                },
                {
                  value: 'color',
                  label: 'Color',
                },
                {
                  value: 'typography',
                  label: 'Typography',
                },
                {
                  value: 'icon',
                  label: 'Icon',
                },
                {
                  value: 'button',
                  label: 'Button',
                },
              ],
            },
            {
              value: 'form',
              label: 'Form',
              children: [
                {
                  value: 'radio',
                  label: 'Radio',
                },
                {
                  value: '2261',
                  label: 'Checkbox',
                },
                {
                  value: 'input',
                  label: 'Input',
                },
                {
                  value: 'input-number',
                  label: 'InputNumber',
                },
                {
                  value: 'select',
                  label: 'Select',
                },
                {
                  value: 'cascader',
                  label: 'Cascader',
                },
                {
                  value: 'switch',
                  label: 'Switch',
                },
                {
                  value: 'slider',
                  label: 'Slider',
                },
                {
                  value: 'time-picker',
                  label: 'TimePicker',
                },
                {
                  value: 'date-picker',
                  label: 'DatePicker',
                },
                {
                  value: 'datetime-picker',
                  label: 'DateTimePicker',
                },
                {
                  value: 'upload',
                  label: 'Upload',
                },
                {
                  value: 'rate',
                  label: 'Rate',
                },
                {
                  value: 'form',
                  label: 'Form',
                },
              ],
            },
            {
              value: 'data',
              label: 'Data',
              children: [
                {
                  value: 'table',
                  label: 'Table',
                },
                {
                  value: 'tag',
                  label: 'Tag',
                },
                {
                  value: 'progress',
                  label: 'Progress',
                },
                {
                  value: 'tree',
                  label: 'Tree',
                },
                {
                  value: 'pagination',
                  label: 'Pagination',
                },
                {
                  value: 'badge',
                  label: 'Badge',
                },
              ],
            },
            {
              value: 'notice',
              label: 'Notice',
              children: [
                {
                  value: 'alert',
                  label: 'Alert',
                },
                {
                  value: 'loading',
                  label: 'Loading',
                },
                {
                  value: 'message',
                  label: 'Message',
                },
                {
                  value: 'message-box',
                  label: 'MessageBox',
                },
                {
                  value: 'notification',
                  label: 'Notification',
                },
              ],
            },
            {
              value: 'navigation',
              label: 'Navigation',
              children: [
                {
                  value: 'menu',
                  label: 'Menu',
                },
                {
                  value: 'tabs',
                  label: 'Tabs',
                },
                {
                  value: 'breadcrumb',
                  label: 'Breadcrumb',
                },
                {
                  value: 'dropdown',
                  label: 'Dropdown',
                },
                {
                  value: 'steps',
                  label: 'Steps',
                },
              ],
            },
            {
              value: 'others',
              label: 'Others',
              children: [
                {
                  value: 'dialog',
                  label: 'Dialog',
                },
                {
                  value: 'tooltip',
                  label: 'Tooltip',
                },
                {
                  value: 'popover',
                  label: 'Popover',
                },
                {
                  value: 'card',
                  label: 'Card',
                },
                {
                  value: 'carousel',
                  label: 'Carousel',
                },
                {
                  value: 'collapse',
                  label: 'Collapse',
                },
              ],
            },
          ],
        },
      ],
      // 默认的 三级分类id
      thirdLevelCateId:null,
      searchParams:{},
      isLogin:false,
    }
  },
  watch: {
    'formData.regionId': function(newVal) {
      this.templateFormData.regionId = newVal;
    }
  },
  mounted(){
    // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
    this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    this.getSiteList()
    // this.getCountryList()
    // this.searchProducts()
    setTimeout(()=>{
      this.drawLineChart()//宏任务
    },0);
    try {
      // 获取并解析存储在 localStorage 中的 myinfo 数据
      const jsonString = localStorage.getItem('myinfo');
      // 检查 jsonString 是否存在且不是空字符串
      if (jsonString) {
        const a = JSON.parse(jsonString);
        // 明确地检查 is_active 是否为 true
        if (a && typeof a.is_active === 'boolean' && a.is_active) {
          this.isVip = true;
        } else {
          this.isVip = false;
        }
      } else {
        this.getUserInfo()
        // this.isVip = this.userInfo.is_active;
      }


    } catch (error) {
      // console.error('Error parsing "myinfo" from localStorage:', error);
      // this.isVip = false;
    }

  },
  created() {
    // this.getCateList()
    // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    const search = localStorage.getItem('searchParams2')
    const cateList = localStorage.getItem('cateList2')
    // 取token 判断是否是登录状态
    const token = localStorage.getItem('token')
    this.isLogin = !!token;
    if(cateList){
      // 去除可能存在的多余空格并检查是否包含逗号
      const trimmedStr = cateList.trim();
      if (trimmedStr.includes(',')) {
        // 如果包含逗号，则按逗号分割并转换为数字数组
        this.selectedValue = trimmedStr.split(',').map(Number);
      } else {
        // 如果不包含逗号，则整个字符串作为一个数字元素放入数组
        this.selectedValue = [parseInt(trimmedStr, 10)];
      }
    }
    if(search){
      try {
        // 尝试解析 JSON 字符串为对象
        const searchdata = JSON.parse(search);
        // 检查是否包含多个对象（假设是一个数组）
        if (Array.isArray(searchdata)) {
          this.searchParams = searchdata.map(item => ({ ...item }));
        }else if (typeof searchdata === 'object' && searchdata !== null) {
          // 如果是单个对象，直接赋值
          this.searchParams = { ...searchdata };
          this.mapSearchParamsToFormData(this.searchParams)
          // 根据缓存搜索商品
          this.localSearchProducts()
        }else {
          console.error('Invalid data format in localStorage');
          const defaultSite = this.siteList.find(site => site.regionId === 211);
          if (defaultSite) {
            this.formData.regionId = defaultSite.regionId;
          }
          this.setDefaultCategory();
        }
      } catch (error) {
        console.error('Failed to parse searchParams from localStorage:', error);
        this.setDefaultCategory();
      }
    }else{
      this.setDefaultCategory();
    }
    // 从URL取数据
    // if(this.$route.query.id){
    //   this.selectedValue = [parseInt(this.$route.query.id)];
    // }else{
    //   // 初始化默认选择
    //   this.setDefaultCategory();
    // }
    // this.country = this.$route.query.country;
  },
  computed: {
    sortedProductList() {
      let sortedList = [...this.tableData];
      if (this.sort && this.order) {
        sortedList.sort((a, b) => {
          if (this.order === 'ascending') {
            return a[this.sort] - b[this.sort];
          } else {
            return b[this.sort] - a[this.sort];
          }
        });
      }
      if(!this.isLogin){
        // 未登录状态 只显示前5条数据
        sortedList = sortedList.slice(0,5)
      }
      return sortedList;
    },

    // 计算属性：根据 RecentlyCountry_code 获取国家全称
    // countryName(){
    //   return this.countryCodes[this.formData.country] || 'Unknown';
    // }
  },
  methods:{
    // 获取用户信息
    getUserInfo(){
      getUser().then((res)=>{
        if(res.code == 200 && res.status == 1){
          console.log(res)
          this.userInfo = res.data
          localStorage.setItem('myinfo',JSON.stringify(this.userInfo))
          this.isVip = this.userInfo.is_active;
        }
      })
    },
    getSiteList(){
      getSites().then((res)=>{
        // 成功
        if(res.code == 200 && res.status == 1){
          this.siteList = this.siteList.concat(res.data.lists)

          // 添加指定的数据对象到 siteList 的末尾
          // const additionalSite = { id: 50, regionId: 212, name: "European Union", cnName: "欧盟" };
          // this.siteList.push(additionalSite);

          // if(!this.country){
          //   this.formData.regionId = 69
          // }else {
          //   this.formData.regionId = parseInt((this.countryCodes1[this.country])) || 69; // 默认值为 69
          // }
          // console.log(2222222222,this.siteList)
          // const defaultSite = this.siteList.find(site => site.regionId === 69);
          // if (defaultSite) {
          //   this.formData.regionId = defaultSite.regionId;
          // }
          // this.formData.regionId = 210;
        }
      })
    },
    // 获取国家列表
    // getCountryList(){
    //   getCountries().then((res)=>{
    //     // 读缓存 没有的时候默认第一个
    //     if(res.code == 200 && res.status ==1)
    //     {
    //       this.siteList = this.siteList.concat(res.data)
    //       console.log(this.siteList)
    //     }
    //   })
    // },
    //获取分类
    async getCateList(){
      try {
        const res = await getMergeCates(this.parentCatId);
        if (res.code === 200 && res.status === 1) {
          this.cateList = res.data;
          // await this.searchProducts()
        } else {
          console.warn('Failed to obtain the classification list:', res);
        }
      } catch (error) {
        console.error('An error occurred while requesting the classification list:', error);
      }
    },
    // 设置默认分类
    setDefaultCategory() {
      // 获取所有顶级分类
      getMergeCates(0).then(async (res) => {
        if (res.code === 200 && res.status === 1) {
          const topLevelCategories = res.data;
          if (topLevelCategories.length >= 6) {
            const subLevelCategoryPid = topLevelCategories[5].id;
            this.selectedValue =[subLevelCategoryPid]
            // // 加载第二级分类
            // const subcategoriesRes = await getMergeCates(subLevelCategoryPid);
            // if (subcategoriesRes.code === 200 && subcategoriesRes.status === 1) {
            //   const subcategories = subcategoriesRes.data;
            //   if (subcategories.length > 0) {
            //     const thirdLevelCategoryPid = subcategories[subcategories.length-1].id;
            //     // 加载第三级分类
            //     const thirdCategoresRes = await getMergeCates(thirdLevelCategoryPid);
            //     if(thirdCategoresRes.code === 200 && thirdCategoresRes.status === 1){
            //       const thirdCategories = thirdCategoresRes.data;
            //       if(thirdCategories.length > 0) {
            //         const thirdLevelCategoryId = thirdCategories[2].id;
            //         // 设置默认选中的分类
            //         this.selectedValue = [subLevelCategoryPid,thirdLevelCategoryPid,thirdLevelCategoryId];
            //         // 触发搜索
            //         this.thirdLevelCateId = thirdLevelCategoryId
            //         // this.formData.cat_id = thirdLevelCategoryId;
            //       }
            //     }
            //   }
            // }
          }
        }
        if(this.selectedValue){
          this.searchProducts();
        }
      }).catch(error => {
        console.error('Error setting default category:', error);
      });
    },
    handleChangeCate(value) {
      console.log('Selected:', value);
      // this.formData.page = 1
    },
    // handleChangeCate(value){
    //     console.log('Selected:', value);
    //     // 当用户选择时，获取最后一级的分类 ID 并加载其子节点
    //     if (value.length > 0) {
    //         this.formData.catIds = value
    //         const a =value[value.length - 1]
    //         console.log(a)
    //         this.parentCatId = a[0];
    //         this.getCateList();
    //     } else {
    //         // 如果没有选择，则重置父分类 ID
    //         this.parentCatId = null;
    //     }
    // },
    // handleExpandChange(value){
    //     console.log('Selected11111:', value);
    // },
    async searchProducts(){
      try{
        for(let key in this.formData){
          if(this.formData[key] == ""){
            this.formData[key] =null
          }
        }
        this.formData.cat_id= null
        if(this.selectedValue.length > 0){
          if(this.thirdLevelCategoryId){
            this.formData.cat_id = this.thirdLevelCategoryId
          }else{
            const n = this.selectedValue.length
            this.formData.cat_id = this.selectedValue[n-1]
          }
        }else{
          this.formData.cat_id = this.cateList[5].id
          this.selectedValue[0] = this.cateList[5].id
        }

        if(this.formData.regionId == null){
          if(!this.country){
            this.formData.regionId = 211
          }else {
            this.formData.regionId = this.countryCodes1[this.country] || 211; // 默认值为 69
          }
        }else{
          this.templateFormData.regionId = this.formData.regionId
        }
        // console.log(this.selectedValues)
        // 根据 selectedValues 构建 cat_id
        // if (this.selectedValues.length > 0) {
        //   this.formData.cat_id = this.selectedValues.map(item => item[item.length - 1]).join(',');
        // } else {
        //   // this.formData.cat_id = this.cateList[0]?.id || null;
        //   // this.formData.cat_id = '26288'
        //   console.log(11111111111111,this.cateList);
        // }
        this.isSuccess = false
        if(this.order == 'ascending'){
          this.orderParams = 'asc';
        }else if(this.order == 'descending')
        {
          this.orderParams = 'desc';
        }
        this.searchParams = {
          region_id:this.formData.regionId,
          cat_id:this.formData.cat_id,
          goods_name:this.formData.goods_name,
          sale_price:this.formData.sale_price,
          retail_price:this.formData.retail_price,
          sale_count_min:this.formData.sale_count_min,
          sale_count_max:this.formData.sale_count_max,
          score_min:this.formData.score_min,
          score_max:this.formData.score_max,
          shelf_time_min:this.formData.shelf_time_min,
          shelf_time_max:this.formData.shelf_time_max,
          page: this.formData.page,
          size: this.formData.size,
          sort:this.sort,
          order:this.orderParams,
        }
        // 参数 搜索  country:this.formData.country,
        const res = await getMergeProducts(this.searchParams);
        this.total =0
        this.tableData = []
        if(res.code == 200 && res.status == 1){
          this.total = res.data.total
          this.tableData = res.data.lists
          this.isSuccess=true
          this.siteList.forEach((item,index)=>{
            if(item.regionId === this.formData.regionId){
              this.symbol = this.siteList[index].symbol
              localStorage.setItem("symbol",this.symbol)
            }
          })
          // 把搜索的参数存一下
          localStorage.setItem("searchParams2",JSON.stringify(this.searchParams))
          // 把选中的分类数组存一下
          localStorage.setItem("cateList2",this.selectedValue)
        }else {
          throw new Error('Server returned an unsuccessful response');
        }
      }catch (error) {
        // this.handleError(error);
        this.isSuccess = true;
      } finally {
        // this.loading = false;
      }
    },
    // 方法用于将 searchParams 的值赋值给 formData
    mapSearchParamsToFormData(a) {
      this.formData = { ...a}
      if(!a.region_id){
        this.formData.regionId = 211// 默认值为 69
      }else {
        if (this.siteList) {
          const self = this; // 保存当前的上下文
          // 延迟显示 防止先出数字
          setTimeout(function (){
            self.formData.regionId = a.region_id;
          },1500)
        }
      }
      // console.log(1111111111,this.formData)
    },
    // 单纯根据缓存的参数进行搜索
    localSearchProducts(){
      getMergeProducts(this.searchParams).then((res)=>{
        this.total =0
        this.tableData = []
        if(res.code == 200 && res.status == 1){
          this.total = res.data.total
          this.tableData = res.data.lists
          this.isSuccess=true
          this.siteList.forEach((item,index)=>{
            if(item.regionId === this.formData.regionId){
              this.symbol = this.siteList[index].symbol
              localStorage.setItem("symbol",this.symbol)
            }
          })
          // 把搜索的参数存一下
          localStorage.setItem("searchParams2",JSON.stringify(this.searchParams))
          // 把选中的分类数组存一下
          localStorage.setItem("cateList2",this.selectedValue)
        }else {
          throw new Error('Server returned an unsuccessful response');
        }
      });
    },
    handleError(error) {
      console.error(this.$t('响应search数据失败'), error);
      if (this.reTry > 0) {
        this.reTry--;
        setTimeout(() => {
          this.searchProducts(); // 重试获取商品详情
        }, 3000); // 等待3秒后重试
      } else {
        ElMessage({
          message: this.$t('响应search数据失败'),
          grouping: true,
          type: 'error'
        });
        this.isSuccess = true;
      }
    },
    clearForm(){
      Object.assign(this.formData, cloneDeep(this.templateFormData));
      this.onSaleTimeRange1 = []
      // this.handleClearSelect()
    },
    // getGoodsDetail(){
    //     getDetails(this.params).then((res)=>{
    //         if(res.code == 200 && res.status == 1){
    //             this.reTry = 3
    //             this.goods = res.data.lists.goods
    //             this.history = res.data.lists.history
    //             this.history.forEach(item=>{
    //             let str =item.createTime.slice(5,10)
    //                 this.dataX = this.dataX.concat(str)
    //                 this.dataY1 = this.dataY1.concat(item.sold)
    //             })
    //             this.isGetData = true
    //             this.drewLine(this.activeName,this.$t('总销量'),this.dataY1)//宏任务
    //             this.drowLine3()
    //         }
    //     }).catch((error)=>{
    //         console.log(this.$t('响应detail数据失败'), error);
    //         setTimeout(()=>{
    //             if(this.reTry > 0){
    //                 this.reTry--;
    //                 this.getGoodsDetail();
    //             }else if(this.reTry == 0){
    //                 this.isSuccess = true
    //                     ElMessage({
    //                     message:this.$t('响应detail数据失败'),
    //                     grouping:true,
    //                     type:'error'
    //                 })
    //             }
    //         },1000)
    //     })
    // },
    drawLineChart(){
      const that =this;
      this.tableData.forEach(item=>{
        console.log(document.getElementById('echarts_' + item.goodsId));
        if(document.getElementById('echarts_' + item.goodsId) ===null){
          return;
        }
        that.myChart = echarts.init(document.getElementById('echarts_' + item.goodsId));
        that.myChart.setOption({
          xAxis: {
            show: false, //取消显示坐标轴,坐标轴刻度,坐标值(如果是y轴,默认的网格线也会取消显示)
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show:false
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value',
            axisLabel: { // 取消显示坐标值
              show: false
            },
            splitLine: { //取消网格线
              show:false
            },
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              symbol: "none",
              smooth: true,
              areaStyle: {}
            }
          ],
          grid: {
            left: "0",
            top: "0",
            right: "0",
            bottom: "0",
            containLabel: true,
          },
        });
      })

    },
    parseDateTime(dateTimeStr) {
      // const date = new Date(dateTimeStr);
      if(dateTimeStr == null || dateTimeStr == '')
      {
        return ;
      }
      const date = dateTimeStr.slice(0,10)
      return date
      // const now = new Date();
      // const diff = now - date;
      // const seconds = Math.floor(diff / 1000);
      // const minutes = Math.floor(seconds / 60);
      // const hours = Math.floor(minutes / 60);
      // const days = Math.floor(hours / 24);
      // const months = Math.floor(days / 30);
      // const years = Math.floor(days / 365);
      // if (years > 0) {
      //     return `${years}年前`;
      // } else if (months > 0) {
      //     return `${months}月前`;
      // } else if (days > 0) {
      //     return `${days}天前`;
      // }
    },
    handleDateRangeChange(value){
      // value 是一个数组，包含两个 Date 对象：[start, end]
      if (Array.isArray(value) && value.length === 2) {
        this.formData.shelf_time_min = value[0]; // 开始日期
        this.formData.shelf_time_max = value[1]; // 结束日期
      }
      console.log(this.formData.onSaleTimeMin)
    },
    handleDateRangeChange2(value){
      // value 是一个数组，包含两个 Date 对象：[start, end]
      if (Array.isArray(value) && value.length === 2) {
        this.formData.mallOpenTimeMin = value[0]; // 开始日期
        this.formData.mallOpenTimeMax = value[1]; // 结束日期
      }
    },
    isOpen(){
      if(this.isOpening == false){
        this.isOpening = true
      }else{
        this.isOpening = false
      }
    },
    handleSizeChange(number){
      this.formData.size = number
      this.isSuccess = false
      this.searchProducts()
    },
    handleCurrentChange(number){
      this.formData.page = number
      this.isSuccess = false
      this.searchProducts()
    },
    // handleSortChange({ column, prop, order }){
    //   console.log(111111111,column)
    //   // console.log(222222222,prop)
    //   // console.log(333333333,order)
    //   if (!prop) {
    //     // 如果 prop 为空，可以选择忽略排序或给出提示
    //     console.warn('prop,error');
    //     return;
    //   }
    //   this.sort = prop;
    //   this.order = order
    // },
    handleSortChange({ column, prop, order }){
      console.log(111111111,column)
      if (!prop) {
        // 如果 prop 为空，可以选择忽略排序或给出提示
        console.warn('prop,error');
        return;
      }
      // 切换排序方向
      if (this.sort === prop) {
        this.order = this.order === 'ascending' ? 'descending' : 'ascending';
        order = this.order
      } else {
        this.sort = prop;
        if(order === 'descending'){
          this.order = 'descending'
        }else{
          this.order = 'ascending'; // 默认升序
        }

      }
      this.isSuccess = false;

      // 手动设置排序图标
      const columns = this.$refs.table.columns;
      columns.forEach(col => {
        if(col.children && col.children.length > 0){
          col.children.forEach(item => {
            if (item.property === prop) {
              item.order = order; // 更新排序图标
            } else {
              item.order = null; // 清除其他列的排序图标
            }
          })
        }
        if (col.property === prop) {
          col.order = order; // 更新排序图标
        } else {
          col.order = null; // 清除其他列的排序图标
        }
      });
      this.searchProducts()
    },
    getHeaderCellClassName({ column, columnIndex }) {
      console.log(columnIndex)
      if (this.sort == column.property) {
        return 'sorted-header';
      }
      return '';
    },
    handleClearSelect(){
      this.selectedValues = []
      // 清除选择的逻辑
      this.selectedValue = [];
      this.formData.cat_id = '0'
    },
    shiftDetailTemu(goodsId,country,platform){
      // 跳shenin详情页
      if(platform === 'shein'){
        // 跳转新标签页
        const routeData = this.$router.resolve({
          name: 'detail2',
          query:{
            id:goodsId,
            country:this.countryCodes[country],
            returnUrl: window.location.href // 记录当前页面的 URL
          }
        });
        window.open(routeData.href, '_blank');
      }else{     // 跳temu详情页
        // 跳转新标签页
        const routeData = this.$router.resolve({
          name: 'detail3',
          query:{
            goodsId:goodsId,
            regionId:country,
            returnUrl: window.location.href // 记录当前页面的 URL
          }
        });
        window.open(routeData.href, '_blank');
      }
      const pagePath = window.location.href; // 当前页面 URL
      const buttonName = 'detail' // 按钮名称
      buttonClick(pagePath, buttonName);
    },
    // 设置不可选的时间
    disabledDate(time){
      if (!(time instanceof Date)) {
        time = new Date(time);
      }
      return time.getTime() > Date.now();
    },
    updateDisabledDateRange(){
      this.$forceUpdate(); // 强制更新组件，确保 disabledDate 重新计算
    },
    handleFocus(){
      this.disabledDate()
    },
    handleVisibleChange(visible){
      if (visible) {
        this.updateDisabledDateRange();
      } else {
        console.log('unvisible');
      }
    },
    // 跳转到订阅页面
    shiftReserve(){
      this.$router.push('/subscribe/price')
    },
    // 跳转到注册页面
    shiftRegister(){
      this.$router.push('/register')
    },
    btnSearchProducts(){
      this.formData.page=1
      this.searchProducts()
      const pagePath = window.location.href; // 当前页面 URL
      const buttonName = 'search' // 按钮名称
      buttonClick(pagePath, buttonName);
    },
  }
}
</script>

<style lang="scss" scoped>
.rank2-card{
  margin: 1rem 0 0 0;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  min-width: 70rem;
  // max-width: 85rem; /* 设置最大宽度 */
  min-height: 44.38rem;
  border-radius: 0.31rem;
  background-color: rgba(255, 255, 255, 1);
  .rank2-card-title{
    width: 19.38rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-medium;
  }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
  margin: 1rem 0;
  //  background: 0 0;
  border-top: 0.1rem solid #f2f3f5;
}
.product-tag{
  padding: 0.2rem 0.4rem;
  height: 1.6rem;
  background-color: rgb(232,245,255);
  min-width: 2.5rem;
  max-width: 10rem;
  border-radius: 0.15rem;
  color: rgb(0, 82, 217);
}
.goodsName{
  padding: 0 0.3rem;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 46px;
  margin:  auto 0;
  color: #165DFF;
}
.mask-layer{
  width: 100%;
  min-width: 70rem;
  height: 240px;
  position: absolute;
  top: 560px;
  /*background-color: rgba(222, 222,222, 0.5);  半透明背景 */
  font-size: 16px;
  color: #111;
  /*pointer-events: none;  确保点击事件穿透到表格 */
}

/*input框 */
:deep(.custom-input1 .el-input__wrapper) {
  border-radius: 0.3rem 0 0 0.3rem;
}
:deep(.custom-input2 .el-input__wrapper) {
  border-radius: 0 0.3rem 0.3rem 0;
}
:deep(.item-padding-style .el-form-item__label){
  padding-right: 5px;
}
.can-not-show{
  margin-top: 3rem;
  width: 36.25rem;
  height: 3.13rem;
  line-height: 3.13rem;
  color: rgba(16, 16, 16, 1);
  font-size: 1rem;
  text-align: center;
  font-family: AlibabaPuHui-regular;
}
.can-not-show2{
  margin-top: 3rem;
  width: 36.25rem;
  height: 3.13rem;
  line-height: 3.13rem;
  font-size: 1rem;
  text-align: center;
}
::v-deep .el-table th.sorted-header  {
  color: #3a8ddb !important;
}

.responsive-form {
  width: 100%;
  max-width: 100%;
}
.el-row {
  margin-bottom: 1rem;
}
.el-col {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin-bottom: 0; /* 移除默认的底部间距 */
}
.el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.responsive-form .el-form-item {
  flex: 1 1 calc(50% - 1rem); /* 每个 form-item 占据 50% 的宽度，减去 gap */
  min-width: 15rem; /* 最小宽度 */
}
.responsive-form .el-form-item__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-input, .form-select, .form-cascader {
  width: 100%;
}

.pagination-container {

  display: flex;
  justify-content: center; /* 居中对齐 */
  //margin: 1rem auto; /* 上下外边距1rem，左右自动居中 */
  //width: fit-content; /* 根据内容自动调整宽度 */
  min-width: 20rem; /* 设置最小宽度 */
  max-width: 100%; /* 确保最大宽度不超过容器 */
}
/* 如果需要更精确地控制分页组件内部元素的布局，可以添加以下样式 */
.el-pagination {
  margin: 1rem 2rem 1rem 50%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
</style>